<template>
  <div class="person">???</div>
</template>

<script setup name="Person" lang="ts">
import { type PersonInter, type Persons } from "../types/index";

//let person: PersonInter = { id: "Abc123..", name: "kong-lingzhen", age: 19 };

/*这里定义了personList是一个数组，且数组的每一项都要符合PersonInter的规范，
<>是泛型，可以是一数组，也可以是一个接口，用的时候才定
*/

let personList: Persons = [
  {
    id: "Abc123..",
    name: "kong-lingzhen",
    age: 19,
  },
  {
    id: "Abc124..",
    name: "long-yantong",
    age: 18,
  },
  {
    id: "Abc125..",
    name: "chen-shaungjing",
    age: 20,
  },
];
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>